import AppleItem from './AppleItem'
import { useStore } from '../store'
import { observer } from 'mobx-react-lite'
const Basket = () => {
  const {apples,eatedApples,add ,isPicking,EatenWeight,notEatenWeight} = useStore()
  return (
    <div className="appleBusket">
      <div className="title">苹果篮子</div>

      <div className="stats">
        <div className="section">
          <div className="head">当前</div>
          <div className="content">
            { apples.length }个苹果，{ notEatenWeight }克
          </div>
        </div>
        <div className="section">
          <div className="head">已吃掉</div>
          <div className="content">
            { eatedApples.length }个苹果，{ EatenWeight }克
          </div>
        </div>
      </div>

      <div className="appleList">
        {apples.map(apple=><AppleItem apple={apple} key={apple.id}/>)}
      </div>

      <div className="btn-div">
        <button disabled={isPicking}  onClick={ add }>{isPicking?'正在采摘': '摘苹果' }</button>
      </div>
    </div>
  )
}

export default observer(Basket)
